<template>
    <h2>子组件</h2>

    <!-- 父组件传过来的值，在子组件模版中可以直接使用 -->
    <h3>{{ msg }}</h3>
    <h3>{{ num }}</h3>
    <h3>{{ obj }}</h3>

    <h4>{{ s }}</h4>

    <button @click="fatherInfor($parent)">获取父组件暴露的信息</button>

</template>

<script setup lang='ts'>
import {ref} from "vue";
let s=ref("");
let data=defineProps({
    msg:String,
    num:{
        type:Number,
        default:88
    },
    obj:Object
})
console.log("data",data);
console.log(data.msg);
s.value=data.msg+"123";


// 暴露子组件里面的数据
defineExpose({
    message:"xyz",
    fn:function(){
        console.log("子组件的方法");
    }
})

let fatherInfor=($parent)=>{
    console.log($parent);
    $parent.fatherFn();

}



</script>

<style scoped>

</style>
